<template>
	<view class="newsList">
		<view class="news-box" v-for="(item,i) in newlist" @click="navigateToDetail(item)">
			<view class="news-top-box" v-if="item.newsType ==1">
				<text class=" title">{{item.title}}</text>
				<view class="bottom-bar">
					<text class="red">置顶</text>
					<text class="author">{{item.author}}</text>
					<text class="num-comments">{{item.commentNum}}评论</text>
				</view>
			</view>
			<view class="news-conment-box" v-if="item.newsType ==2">
				<text class=" title">{{item.title}}</text>
				<view class="new-images">
					<image :src="item.images[0]" mode=""></image>
					<image :src="item.images[1]" mode=""></image>
					<image :src="item.images[2]" mode=""></image>
				</view>
				<view class="bottom-bar">
					<text class="author">{{item.author}}</text>
					<text class="num-comments">{{item.commentNum}}评论</text>
				</view>
			</view>
			<view class="news-ad-box" v-if="item.newsType ==3">
				<text class=" title">{{item.title}}</text>
				<view class="new-images">
					<image :src="item.images[0]" mode=""></image>
					<image :src="item.images[1]" mode=""></image>
					<image :src="item.images[2]" mode=""></image>
				</view>
				<view class="bottom-bar">
					<text class="ad">广告</text>
					<text class="author">{{item.author}}</text>
					<text class="num-comments">{{item.commentNum}}评论</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "NewTop",
		data() {
			return {
				newlist: [],

			};
		},
		methods: {
			getData() {
				console.log("加载");
				uniCloud.callFunction({
					name: 'getNews',
					success: (e) => {
						console.log("获取新闻成功", e.result);
						this.newlist = e.result.data;
					}

				});
			},
			navigateToDetail(item) {
				uni.navigateTo({

					url: '/pages/news-detail/news-detail?id=' + item._id
				});
			}
		},
		created() {
			console.log("到几点");
			this.getData()
		}
	}
</script>

<style scoped>
	.news-box {
		padding: 26rpx;
	}

	.title {
		font-size: 40rpx;
	}

	.bottom-bar {
		font-size: 22rpx;
		color: #666666;
		padding: 10rpx 0;
	}

	.red {
		color: #F5433F;
	}

	.author {
		padding: 0 30rpx;
	}

	.new-images {
		padding: 30rpx 0;
		display: flex;
		gap: 20rpx;
	}

	.new-images image {
		height: 150rpx;
	}

	.ad {
		color: #00aaff;
	}
</style>